<template>
    <div class="container">
        <el-card class="page-container">
            <template #header>
                <div class="header">
                    <span>收容所管理</span>
                    <div class="extra">
                        <el-button @click="cityAddress = null; shelterList()">重置</el-button>
                        <el-button type="primary"
                            @click="dialogVisible = true; title = '添加收容所'; clearData()">添加收容所</el-button>
                    </div>
                </div>
            </template>
            <el-table :data="shelters" style="width: 100%">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="收容所名称" prop="shelterName"></el-table-column>
                <el-table-column label="二级地区" prop="cityAddress"></el-table-column>
                <el-table-column label="具体地址" prop="shelterAddress"></el-table-column>
                <el-table-column label="猫数量" prop="countCat" width="70" align="center"></el-table-column>
                <el-table-column label="犬数量" prop="countDog" width="70" align="center"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button :icon="Memo" circle plain type="success" @click="jumpToAnimal(row)"></el-button>
                        <el-button :icon="RefreshRight" circle plain @click="updateCount(row)"></el-button>
                        <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                        <el-button :icon="Delete" circle plain type="danger" @click="deleteShelter(row)"></el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="没有数据" />
                </template>
            </el-table>
            <!-- 分页条 -->
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
            <!-- 添加收容所弹窗 -->
            <el-dialog v-model="dialogVisible" :title="title" width="30%">
                <el-form :model="shelterModle" :rules="rules" label-width="100px" style="padding-right: 30px">
                    <el-form-item label="收容所名称" prop="shelterName">
                        <el-input v-model="shelterModle.shelterName"></el-input>
                    </el-form-item>
                    <el-form-item label="所在城市" prop="cityAddress">
                        <el-input v-model="shelterModle.cityAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="具体地址" prop="shelterAddress">
                        <el-input v-model="shelterModle.shelterAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="猫数量" prop="countCat">
                        <el-input v-model="shelterModle.countCat"></el-input>
                    </el-form-item>
                    <el-form-item label="犬数量" prop="countDog">
                        <el-input v-model="shelterModle.countDog"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="title == '添加收容所' ? addShelter() : updateShelter()"> 确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { Memo, RefreshRight, Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { shelterListService, shelterAddService, shelterUpdateService, shelterDeleteService, shelterFindByIdService } from '@/api/shelter'
import { animalListService } from '@/api/animal'
import { ElMessage, ElMessageBox } from 'element-plus'

const shelters = ref('')

const $route = useRoute()
const $router = useRouter()

const cityAddress = ref($route.query.name)

const title = ref('')

const pageNum = ref(1)
const total = ref()
const pageSize = ref(3)

const dialogVisible = ref(false)

const shelterModle = ref({
    shelterName: '',
    cityAddress: '',
    shelterAddress: '',
    countCat: 0,
    countDog: 0
})

const onSizeChange = (size) => {
    pageSize.value = size
    shelterList()
}

const onCurrentChange = (num) => {
    pageNum.value = num
    shelterList()
}

const shelterList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        cityAddress: cityAddress.value
    }
    let result = await shelterListService(params)
    total.value = result.data.total
    shelters.value = result.data.items
}

const animalListCat = async (row) => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        animalType: 'Cat',
        shelterId: row.id
    }
    let result = await animalListService(params)
    shelterModle.value.countCat = result.data.total
}

const animalListDog = async (row) => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        animalType: 'Dog',
        shelterId: row.id
    }
    let result = await animalListService(params)
    shelterModle.value.countDog = result.data.total
}

const checkCountCat = (rule, value, callback) => {
    const reg = /^(0|[1-9]\d*)$/;
    if (reg.test(value)) {
        callback();
    } else {
        callback(new Error('请输入大于等于0的整数'));
    }
}

const rules = {
    shelterName: [
        { required: true, message: '请输入收容所名称', trigger: 'blur' },
        { min: 1, max: 10, message: '长度为1-10位非空字符', trigger: 'blur' }
    ],
    cityAddress: [
        { required: true, message: '请输入所在市', trigger: 'blur' },
        { min: 1, max: 20, message: '长度为1-20位非空字符', trigger: 'blur' }
    ],
    shelterAddress: [
        { required: true, message: '请输入具体地址', trigger: 'blur' },
        { min: 1, max: 50, message: '长度为1-50位非空字符', trigger: 'blur' }
    ],
    countCat: [
        { validator: checkCountCat, trigger: 'blur' }
    ],
    countDog: [
        { validator: checkCountCat, trigger: 'blur' }
    ]
}

const addShelter = async () => {
    let result = await shelterAddService(shelterModle.value)
    ElMessage.success('添加成功')
    shelterList()
    dialogVisible.value = false
}

const updateShelter = async () => {
    console.log(shelterModle.value);
    let result = await shelterUpdateService(shelterModle.value);
    ElMessage.success('修改成功')
    shelterList()
    dialogVisible.value = false
}

const showDialog = (row) => {
    dialogVisible.value = true;
    title.value = '编辑收容所';
    shelterModle.value.shelterName = row.shelterName;
    shelterModle.value.cityAddress = row.cityAddress;
    shelterModle.value.shelterAddress = row.shelterAddress;
    shelterModle.value.countCat = row.countCat;
    shelterModle.value.countDog = row.countDog;
    shelterModle.value.id = row.id
}

const deleteShelter = (row) => {
    ElMessageBox.confirm(
        '你确认要删除该收容所吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await shelterDeleteService(row.id);
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        shelterList()
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '用户取消了删除',
        })
    })

}

const clearData = () => {
    shelterModle.value.shelterName = '';
    shelterModle.value.cityAddress = '';
    shelterModle.value.shelterAddress = '';
    shelterModle.value.countCat = 0;
    shelterModle.value.countDog = 0;
}

const jumpToAnimal = (row) => {
    $router.push({ path: '/animalForm', query: { shelterId: row.id } })
}

const updateCount = async (row) => {
    await animalListCat(row)
    await animalListDog(row)
    shelterModle.value.shelterName = row.shelterName
    shelterModle.value.cityAddress = row.cityAddress
    shelterModle.value.shelterAddress = row.shelterAddress
    shelterModle.value.id = row.id
    updateShelter()
}

shelterList();
</script>


<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .page-container {
        width: 95%;
        height: 88vh;
        background-color: #e0f3f8;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>